<ion-header>
  <ion-toolbar>
    <ion-title>
      {{skill.title}}
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span primary hideWhen="android">关闭</span>
        <ion-icon name="md-close" showWhen="android"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="has-header">
  <ion-card>
    <ion-card-content>
      {{skill.description}}
    </ion-card-content>
  </ion-card>

  <ion-item-divider light *ngIf="skill.rankDescriptions && skill.rankDescriptions.length > 0">点亮技能</ion-item-divider>
  <ion-list hideWhen="ios">
    <div *ngIf="skill.rankDescriptions && skill.rankDescriptions.length > 0">
      <ion-item-sliding *ngFor="let todo of skill.rankDescriptions">
        <ion-item>
          <ion-label>{{todo}}</ion-label>
          <ion-checkbox (click)="addItemToDone(todo)" [(ngModel)]="todo.checked" dark></ion-checkbox>
        </ion-item>
      </ion-item-sliding>
    </div>
  </ion-list>


  <ion-list showWhen="ios">
    <div *ngIf="skill.rankDescriptions && skill.rankDescriptions.length > 0">
      <ion-item-sliding *ngFor="let todo of skill.rankDescriptions">
        <ion-item>
          {{todo}}
        </ion-item>
        <ion-item-options>
          <button ion-button danger (click)="addItemToDone(todo)">
            <ion-icon name="checkbox"></ion-icon>
            Done
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </div>
  </ion-list>

  <ion-item-group *ngIf="skill.links">
    <ion-item-divider light *ngIf="skill.links">扩展资料</ion-item-divider>
    <button ion-item *ngFor="let link of skill.links; let i = index;">
      {{link.label}}
    </button>
  </ion-item-group>
  <ion-item-group *ngIf="skill.books">
    <ion-item-divider light *ngIf="skill.books">推荐书籍</ion-item-divider>
    <button ion-item *ngFor="let book of skill.books; let i = index;">
      {{book.label}}
    </button>
  </ion-item-group>
</ion-content>
